<!--
 * hi-icon - 图标
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="hi-icon" :class="_classes" :style="_styles" :hover-class="hover" @tap="_emits('click')">
        <!-- 字体图标 -->
        <text class="hi-icon__iconfont" :class="_iconfontClasses" v-if="!_isImage"></text>

        <!-- 图片图标 -->
        <image class="hi-icon__image" :src="name" :mode="mode" v-else></image>
    </view>
</template>

<!-- 由于 HbuilderX 不支持 defineOptions() 写法，故只能在此处进行配置 -->
<script>
    export default { options: uni?.$hi?.config?.componentsOptions || {} };
</script>

<script setup>
    import { computed } from "vue";
    import props from "./props.js";
    import { isString, isArray } from "../../functions";

    // props
    const _props = defineProps(props);

    // emits
    const _emits = defineEmits(["click"]);

    // classes
    const _classes = computed(() => {
        const classes = [];

        // 图片图标
        if (_isImage.value) classes.push("hi-icon--image");

        return classes;
    });

    // styles
    const _styles = computed(() => {
        const styles = [];

        // 颜色
        if (_props.color) styles.push(`--hi-icon-color: ${_props.color}`);

        // 大小
        if (_props.size) styles.push(`--hi-icon-font-size: ${_props.size}`);

        // 宽
        if (_props.width) styles.push(`--hi-icon-width: ${_props.width}`);

        // 高
        if (_props.height) styles.push(`--hi-icon-height: ${_props.height}`);

        return styles;
    });

    // 图标名称（类名）
    const _iconfontClasses = computed(() => {
        const classes = [];

        // 1. 不是图片图标
        if (!_props.name?.includes("/")) {
            // 1.1. 内置图标，以双下划线开头的默认被当作成内置图标
            if (_props.name.startsWith("__")) {
                classes.push(`hi_iconfont hi_iconfont${_props.name}`);
            }

            // 1.2. 扩展图标
            else {
                // 2.1. 设置了扩展图标前缀
                if (uni?.$hi?.config?.icon?.prefix) {
                    // 2.1.1. 扩展图标前缀是字符串
                    if (isString(uni.$hi.config.icon.prefix)) {
                        // 添加对应的类名
                        classes.push(`${uni.$hi.config.icon.prefix} ${uni.$hi.config.icon.prefix + _props.name}`);
                    }

                    // 2.1.2. 扩展图标前缀是数组（多扩展图标库）
                    if (isArray(uni.$hi.config.icon.prefix)) {
                        // 添加对应的类名
                        classes.push(...uni.$hi.config.icon.prefix.map((prefix) => `${prefix} ${prefix}-${_props.name}`));
                    }
                }

                // 2.2. 未设置扩展图标前缀，直接将传入的值加到类名上
                else {
                    classes.push(`${_props.name}`);
                }
            }
        }

        return classes;
    });

    // 图片图标?
    const _isImage = computed(() => _props.name?.includes("/"));
</script>

<style lang="scss" scoped>
    // HiUi 内置 iconfont 图标库
    @import "../../styles/iconfont.css";

    .hi-icon {
        display: var(--hi-icon-display, inline-flex);
        flex-direction: var(--hi-icon-flex-direction, column);
        align-items: var(--hi-icon-align-items, center);
        justify-content: var(--hi-icon-justify-content, center);
        color: var(--hi-icon-color, inherit);
        font-size: var(--hi-icon-font-size, inherit);
        width: var(--hi-icon-width, 1em);
        height: var(--hi-icon-height, 1em);

        // 字体图标
        &__iconfont {
            font-size: inherit;
            line-height: 1;
        }

        // 图片图标
        &__image {
            display: block;
            font-size: inherit;
            width: var(--hi-icon-image-width, 100%);
            height: var(--hi-icon-image-height, 100%);
        }
    }
</style>
